<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="options.css">
    <link rel="stylesheet" type="text/css" href="action.css">
    <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css">
    <script src="action.js" type="module"></script>
  </head>

  <body class="vimium-body">
    <div id="not-enabled-error" style="display: none">
      <h1>
        Vimium is not allowed to run on this page.
      </h1>
      <p>
        Your browser does not run web extensions like Vimium on certain pages, usually for security
        reasons.
      </p>
    </div>

    <div id="firefox-missing-permissions-error" style="display: none">
      <h1>
        Vimium is missing the "all hosts" permission.
      </h1>
      <p>
        Firefox requires users to manually grant this permission to extensions. You can enable it
        via the button below:
      </p>

      <p>
        <button id="grant-hosts-permission">Enable all hosts permission</button>
      </p>

      <p>
        Or by navigating to:
      </p>

      <p>
        about:addons > Vimium > Manage (click the 3 dot menu) > Permissions > <br> Enable the
        "Access your data for all websites" permission.
      </p>
      <p>
        <a href="https://github.com/philc/vimium/wiki/Permissions">See here</a> for more info about
        this permission.
      </p>
    </div>

    <div id="dialog-body">
      <div>
        <span id="howManyEnabled">All</span> Vimium keys are enabled on this page.
      </div>

      <div id="add-first-rule-container">
        <button id="add-first-rule">Exclude Vimium keys on this page</button>
      </div>

      <div id="exclusions-container" style="display: none">
        <div id="exclusion-scroll-box">
          <table id="exclusion-rules">
            <thead>
              <tr>
                <td>
                  <span class="exclusion-header-text">Patterns matching the current page</span>
                </td>
                <td><span class="exclusion-header-text">Keys to exclude</span></td>
              </tr>
            </thead>
          </table>
        </div>

        <button id="exclusion-add-button">Add rule</button>
      </div>
    </div>

    <footer>
      <div class="options-message">
        See all exclusion rules on the <a id="optionsLink" target="_blank">Options</a> page.
      </div>
      <div>
        <button id="cancel">Cancel</button>
        <button id="save" disabled="true">No changes</button>
      </div>
    </footer>

    <template id="exclusion-rule-template">
      <tr class="rule">
        <td>
          <input type="text" name="pattern" spellcheck="false" placeholder="URL pattern" />
          <div class="validationMessage"></div>
        </td>
        <td>
          <input type="text" name="passKeys" spellcheck="false" placeholder="All" />
        </td>
        <td>
          <input type="button" class="remove" value="&#x2716;" />
        </td>
      </tr>
    </template>
  </body>
</html>
